<script setup lang="ts">
import { ref } from "vue";

interface Props {
   pictures?: string[];
}

defineProps<Props>();

const previewUrl = ref<string>("");
const handlePreview = (url: string) => {
   previewUrl.value = url;
};

const handleClose = () => {
   previewUrl.value = "";
};

</script>

<template>
   <div class="preview-good">
      <div class="list">
         <a :class="{active:previewUrl===url}" v-for="url in pictures" :key="url" @click="handlePreview(url)">
            <img :src="url" alt="">
         </a>
      </div>
      <div class="preview" v-if="previewUrl">
         <img :src="previewUrl">
         <i class="iconfont icon-close-new" @click="handleClose"></i>
      </div>
   </div>
</template>

<style scoped lang="less">
.preview-good {
   .list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;

      a {
         width: 120px;
         height: 120px;
         border: 1px solid #e4e4e4;
         margin-right: 20px;
         margin-bottom: 10px;
         border-radius: 20px;
         overflow: hidden;
         img {
            width: 100%;
            height: 100%;
            object-fit: cover;
         }

         &.active {
            border-color: @xtxColor;
         }
      }
   }

   .preview {
      width: 350px;
      height: 300px;
      position: relative;
      border-radius: 25px;
      overflow: hidden;
      img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }

      i {
         position: absolute;
         right: 0;
         top: 0;
         width: 30px;
         height: 30px;
         background: rgba(0, 0, 0, 0.2);
         color: #fff;
         text-align: center;
         line-height: 30px;
         cursor: pointer;
      }
   }
}
</style>
